<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view class="container">
		<!-- 页面头部返回和搜索图标，标题 -->
		<my-Back-search style="position: relative; z-index: 1000;" :yesSearch="false">
			<template #back>
				<uni-icons @click="onBack" type="back" size="28" color="#ff0000"></uni-icons>

			</template>
			<template #time>
				<view>{{ Title }}</view>
			</template>
			<template #search>
				<uni-icons @click="toggleDropdown" type="bars" size="28" color="#ff0000"></uni-icons>
				<DropdownMenu :showDropdown="showDropdown"></DropdownMenu>
			</template>
		</my-Back-search>

		<view class="image-eight-Three" v-if="videos.length > 0">
			<my-img-y-Three class="item" v-for="video in videos" :key="video?.id" :images="video?.imageUrl"
				:tags="video?.tags" :name="video?.name" :bifen="video?.bifen" :biao="video?.biao"
				:episode="video?.episode" :episodes="video?.episodes" :urlId="video?.id"></my-img-y-Three>
		</view>

		<view class="image-eight-Three" v-if="videosList.length > 0">
			<my-img-y-Three class="item" v-for="(item, index) in videosList" :index="index"
				:key="item.collection[0].id" :images="item.collection[0].imageUrl" :tags="item.collection[0].tags"
				:name="item.collection[0].name" :bifen="item.collection[0].bifen" :biao="item.collection[0].biao"
				:episode="item.collection[0].episode" :episodes="item.collection[0].episodes"
				:urlId="item.collection[0].id"></my-img-y-Three>
		</view>

	</view>
	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view> ... مەزمۇن تۈگىدى </view>
	</view>
</template>

<script setup>
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	ref
} from 'vue';
import {
	swiperImg
} from '@/API/indexApis.js';
import {
	RecommendWath
} from '@/API/geidApis.js';
import {
	onReachBottom
} from '@dcloudio/uni-app';
const loading = ref(true)
const Title = ref() //头部title
const videos = ref([]) //video数据
const videosList = ref([]) //video数据
const nextPage = ref(1);
const type = ref() //头部title

// 获取演员信息
onLoad((options) => {
	console.log("获取的信息：", options);
	Title.value = options.name
	if (options?.time) {
		Swiperlist(options.type)
	}
	if (options?.recommend) {
		RecommendWathFunction(1)
	}
})

// 获取参数
const Swiperlist = async (type) => {
	let video = await swiperImg(36, type);
	videos.value = video.data.list;
	console.log("videos:", videos.value)
	loading.value = false
}

// 用户推荐内容
const RecommendWathFunction = async (page) => {
	let video = await RecommendWath(page , 0);
	videosList.value = video.list;
	nextPage.value = video.nextPage;
	console.log("videos:", video)
	loading.value = false
}

// 触底刷新
onReachBottom(() => {
	console.log("触底了");
	if (nextPage.value > 1) {
		RecommendWathFunction(nextPage.value)
		console.log("触底了");
	}
})


// 返回按钮
function onBack() {
	// 获取当前页面栈
	const pages = getCurrentPages()
	console.log('当前页面栈:', pages.length)
	if (pages.length > 1) {
		uni.navigateBack({
			delta: 1 // 返回上一个页面
		});
	} else {
		// 已经是第一页，不能返回
		// 可以选择关闭小程序或跳转到首页
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

}
</script>

<style scoped>
.image-eight-Three {
	padding: 30rpx;
	display: grid;
	gap: 15rpx;
	grid-template-columns: repeat(3, 1fr);
	direction: rtl;
}

.item {
	overflow: hidden;
	/* 防止内容溢出 */
	position: relative;
	width: 100%;
	/* 图片宽度填充整个容器 */
	height: auto;
	/* 根据宽度自动调整高度 */
	display: block;
	/* 移除图片下方默认的空白间隙 */
	object-fit: cover;
	/* 保证图片完全覆盖容器，可能会裁剪图片 */
}
</style>